<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <style>
        html, body {
        height: 100%;
        }
        body {
        background-color: #fff;
        color: #fff;
        font-family: "Microsoft YaHei";
        }
        .bg {
        }
        .item {
        // padding: 30px 30px 50px;
        }
    </style>
</head>
<!-- ECharts单文件引入 -->
<script src="js/echarts.common.min.js"></script>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="lineChart" style="float: center; width: '100%';height: 380px; margin-left: '2%';margin-bottom: 35px"></div>
    <div id="barChart" style="float: center; width: '100%';height: 380px; margin-left: '2%';margin-bottom: 35px"></div>
    <div id="pieChart" style="float: center; width: '100%';height: 380px; margin-left: '2%';margin-bottom: 35px"></div>

    <script type="text/javascript">
        var myLineChart;
        var lineOptions;
        var myBarChart;
        var barOptions;
        var myPieChart;
        var pieOptions;
        //symbol的images的格式“image://./images/node.png”最好是能够写绝对路径，加上“//.”回到根目录echart/
        var childUrl = './images/child.png';
        var lineJson;//用于临时存储折线图json对象, 便于追加数据
        //创建折线图
        function createLineChart(obj) {
            lineJson = obj;
            lineOptions = {
                title: {
                    //text: '脉搏值(次/min)',
                    text: obj.title,
                    subtext: 'make by sxt',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "脉搏频率 : <br/>{b} - {c} 次/min"
                },
                xAxis: {
                    id: 'dataX',
                    type: 'category',
                    splitLine: {
                        show: true
                    },
                    axisLabel: {
                        //formatter: '{value} °C'
                        formatter: '{value}'
                    },
                    data: obj.times //动态展示运动时间
                },
                yAxis: {
                    type: 'value',
                    axisLine: { onZero: true },
                    splitLine: {
                        show: true
                    },
                    axisLabel: {
                        //formatter: '{value} km'
                        formatter: '{value}'
                    },
                    min: 0,
                    max: 150//在此设置范围
                },

                dataZoom: [
                    {
                        id: 'dataZoom',
                        show: false,
                        type: 'inside',//inside 为拖动效果
                        //type: 'slider',//slider为手动更新效果
                        realtime: true,
                        filterMode: 'filter',
                        start: 20,
                        end: 85,
                        xAxisIndex: 0
                    }
                ],

                series: [{
                    id: 'dataY',
                    name: '脉搏频率(次)/(s)',
                    type: 'line',
                    smooth: true,
                    data: obj.steps, //动态展示运动步数数据
                    lineStyle: {
                        normal: {
                            width: 3,
                            shadowColor: 'rgba(0,0,0,0.4)',
                            shadowBlur: 10,
                            shadowOffsetY: 10
                        }
                    },
                    markPoint: {//标注点
                        data: [//这种方式内部自动计算最值
                            {
                                type: 'max',
                                name: '最大值',
                                symbol: 'image://' + childUrl,
                                symbolSize: [25, 30],
                                symbolOffset: [0, '-60%']
                            },
                            {
                                type: 'min',
                                name: '最小值',
                                symbol: 'image://' + childUrl,
                                symbolSize: [25, 30],
                                symbolOffset: [0, '50%']
                            }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }]
            };
        }

        //更新折线图的缩放起始位置
        function updateZoomState(start, end) {
            myChart.setOption({
                dataZoom: [{
                    id: 'dataZoom',
                    start: start,
                    end: end
                }]
            });
        }

        //获取数组最小值
        function getMinValue(obj) {
            var min = obj.steps[0];
            for (var i = 1; i < obj.steps.length; i++) {
                if (obj.steps[i] < min) {
                    min = obj.steps[i];
                }
            }
            return min;
        }
        //获取数组最大值
        function getMaxValue(obj) {
            var max = obj.steps[0];
            for (var i = 1; i < obj.steps.length; i++) {
                if (obj.steps[i] > max) {
                    max = obj.steps[i];
                }
            }
            return max;
        }

        //创建柱状图
        function createBarChart(obj) {

            barOptions = {
                title: {
                    //text: '某地区蒸发量和降水量',
                    text: obj.title,
                    subtext: 'make by sxt',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 'right',
                    //data:['蒸发量','降水量']
                    data: [obj.type1, obj.type2]
                },

                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: obj.times
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                dataZoom: [
                    {
                        show: false,
                        type: 'inside',//inside 为拖动效果
                        //type: 'slider',//slider为手动更新效果
                        realtime: true,
                        filterMode: 'filter',
                        start: 20,
                        end: 85,
                        xAxisIndex: 0
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: obj.data1,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }]
                        }
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: obj.data2,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };
        }

        //创建饼状图
        function createPieChart(obj){

            pieOptions = {
                title : {
                    //text: '用户访问来源',
                    text: obj.title,
                    subtext: '纯属虚构',
                    subtext: 'make by sxt',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    //left: 'left',
                    x:'left',
                    //data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    data: obj.names
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        <!--data:[-->
                            <!--{value:335, name:'直接访问'},-->
                            <!--{value:310, name:'邮件营销'},-->
                            <!--{value:234, name:'联盟广告'},-->
                            <!--{value:135, name:'视频广告'},-->
                            <!--{value:1548, name:'搜索引擎'}-->
                        <!--],-->
                        data:obj.values,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        }

        //显示图表
        function createChart(type, json1) {
            createLineChart(json1);
            // 基于准备好的dom，初始化echarts实例
            myLineChart = echarts.init(document.getElementById('lineChart'));
            //使用指定的配置项和数据显示图表。
            myLineChart.setOption(lineOptions);
        }
        function createChart2(type, json1) {
            createBarChart(json1);
            // 基于准备好的dom，初始化echarts实例
            myBarChart = echarts.init(document.getElementById('barChart'));
            //使用指定的配置项和数据显示图表。
            myBarChart.setOption(barOptions);
        }
        function createChart3(type, json1) {
            createPieChart(json1);
            // 基于准备好的dom，初始化echarts实例
            myPieChart = echarts.init(document.getElementById('pieChart'));
            //使用指定的配置项和数据显示图表。
            myPieChart.setOption(pieOptions);
        }
    </script>

</body>